<template>
  <router-link class="shop-pages"  to="/detail">
    <div class="shop-image">
      <img :src="item.image" alt="加载失败" />
      <p class="shop-title">{{ item.title }}</p>
      <p class="shop-pic">
        <span>￥</span>
        <span>{{ item.pic }}</span>
      </p>
    </div>
  </router-link>
</template>

<script>
  export default {
    name:"ShopPages",
    props: {
      item: Object,
      index: Number,
    },
  };
</script>

<style  scoped>


 .shop-pages {
  width: 272px;
  height: 360px;
  background: #fff;
  margin-right: 18px;
  margin-bottom: 24px;
  border-radius: 2px;
  cursor: pointer;
  box-shadow: 2px 4px 8px rgba(0, 0, 0, 0.1);
  overflow: hidden;
}
.shop-pages .shop-image {
  width: 100%;
}
.shop-pages .shop-image img {
  width: 100%;
}
.shop-pages .shop-title {
  width: 90%;
  margin: 0 auto;
}
.shop-pages .shop-pic {
  color: #fb7299;
  padding-top: 3px;
  line-height: 22px;
  width: 90%;
  margin: 0 auto;
  font-weight: bold;
}
.shop-pages .shop-pic span:nth-child(1) {
  font-size: 14px;
}
.shop-pages .shop-pic span:nth-child(2) {
  font-size: 22px;
}
</style>